<template>
	<div class="zco-face-recognition-container" :style="getStyle">
		<p>{{ getMessage }}</p>
		<p>{{ getResult }}</p>
		<template v-if="imageUrl">
			<p>比对图片：</p>
			<img :src="imageUrl" width="78" height="98" @click="preview" />
		</template>
	</div>
</template>
<script>
import ZcoIM from '../../index';
import zcoIMEvent from '@/store/event';
export default {
	name: 'APP',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		imageUrl: {
			type: String,
			default: () => ''
		},
		result: {
			type: String,
			default: () => ''
		},
		fromUserName: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getMessage() {
			return `对${this.toUserRole === 'customer' ? '访客' : '坐席'} <${this.toUserName}> 发起人脸对比`;
		},
		getResult() {
			if (this.result === 'yes') {
				return '比对成功';
			} else {
				return '比对失败，原因：不是本人';
			}
		},
		getStyle() {
			if ((ZcoIM.agent && this.fromUserName === ZcoIM.agent.userName) || (ZcoIM.client && this.fromUserName === ZcoIM.client.userName)) {
				return 'text-align: right;';
			} else {
				return '';
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		preview() {
			zcoIMEvent.emitPreview({ type: 'png', url: this.imageUrl });
		}
	},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-face-recognition-container p {
	margin: 0;
}
.zco-face-recognition-container img {
	margin-top: 4px;
}
</style>
